<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>各环节信息记录</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.records-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.search-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.search-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.search-form {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			align-items: end;
		}
		.form-item {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.form-label {
			font-weight: 500;
			color: #333;
			font-size: 14px;
		}
		.records-timeline {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.timeline-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30px;
			padding-bottom: 15px;
			border-bottom: 2px solid #f0f2f5;
		}
		.timeline-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.process-timeline {
			position: relative;
		}
		.timeline-item {
			position: relative;
			padding-left: 80px;
			margin-bottom: 40px;
		}
		.timeline-item:last-child {
			margin-bottom: 0;
		}
		.timeline-dot {
			position: absolute;
			left: 20px;
			top: 0;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 3px solid #409eff;
			background: #fff;
			z-index: 2;
		}
		.timeline-dot.completed {
			background: #67c23a;
			border-color: #67c23a;
		}
		.timeline-dot.current {
			background: #409eff;
			border-color: #409eff;
			animation: pulse-dot 2s infinite;
		}
		@keyframes pulse-dot {
			0% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); }
			70% { box-shadow: 0 0 0 10px rgba(64, 158, 255, 0); }
			100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0); }
		}
		.timeline-line {
			position: absolute;
			left: 27px;
			top: 16px;
			bottom: -40px;
			width: 2px;
			background: #e1e6ed;
		}
		.timeline-item:last-child .timeline-line {
			display: none;
		}
		.timeline-content {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 20px;
			border-left: 4px solid #409eff;
		}
		.timeline-content.completed {
			border-left-color: #67c23a;
		}
		.process-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 15px;
		}
		.process-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.process-status {
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 500;
		}
		.status-completed {
			background: #f0f9ff;
			color: #1890ff;
			border: 1px solid #b3d8ff;
		}
		.status-current {
			background: #fff7e6;
			color: #fa8c16;
			border: 1px solid #ffd591;
		}
		.status-pending {
			background: #fafafa;
			color: #999;
			border: 1px solid #d9d9d9;
		}
		.process-details {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			margin-bottom: 15px;
		}
		.detail-item {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
		.detail-label {
			font-size: 12px;
			color: #666;
			font-weight: 500;
		}
		.detail-value {
			font-size: 14px;
			color: #333;
		}
		.certificates-section {
			margin-top: 15px;
			padding-top: 15px;
			border-top: 1px solid #e9ecef;
		}
		.certificates-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 10px;
		}
		.certificate-list {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}
		.certificate-item {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px;
			background: #fff;
			border: 1px solid #e9ecef;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.certificate-item:hover {
			border-color: #409eff;
			background: #f0f9ff;
		}
		.certificate-icon {
			font-size: 16px;
			color: #409eff;
		}
		.certificate-name {
			font-size: 13px;
			color: #333;
		}
		.records-summary {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.summary-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.summary-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.summary-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.summary-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.actions-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			text-align: center;
		}
		.no-data {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.filter-tags {
			display: flex;
			gap: 10px;
			margin-top: 15px;
			flex-wrap: wrap;
		}
		.filter-tag {
			background: #f0f9ff;
			color: #409eff;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.filter-tag:hover {
			background: #409eff;
			color: white;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="records-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>各环节信息记录</h2>
				<p>详细记录供应链各个环节的时间、责任人、检测报告等凭证信息</p>
			</div>

			<!-- 查询面板 -->
			<div class="search-panel">
				<div class="search-title">
					<i class="el-icon-search"></i>
					信息查询
				</div>
				<div class="search-form">
					<div class="form-item">
						<label class="form-label">溯源码</label>
						<el-input v-model="searchForm.traceCode" placeholder="请输入溯源码" clearable>
							<el-button slot="append" icon="el-icon-search" @click="searchRecords"></el-button>
						</el-input>
					</div>
					<div class="form-item">
						<label class="form-label">商品名称</label>
						<el-select v-model="searchForm.product" placeholder="选择商品" clearable>
							<el-option v-for="product in products" :key="product.value" :label="product.label" :value="product.value"></el-option>
						</el-select>
					</div>
					<div class="form-item">
						<label class="form-label">环节类型</label>
						<el-select v-model="searchForm.processType" placeholder="选择环节" clearable>
							<el-option label="全部环节" value="all"></el-option>
							<el-option label="产地种植/养殖" value="farming"></el-option>
							<el-option label="初加工" value="processing"></el-option>
							<el-option label="冷链运输" value="transport"></el-option>
							<el-option label="仓储管理" value="storage"></el-option>
							<el-option label="终端销售" value="retail"></el-option>
						</el-select>
					</div>
					<div class="form-item">
						<label class="form-label">时间范围</label>
						<el-date-picker
							v-model="searchForm.dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
				<div class="filter-tags">
					<span v-for="tag in quickFilters" :key="tag.value" class="filter-tag" @click="applyQuickFilter(tag)">
						{{tag.label}}
					</span>
				</div>
			</div>

			<!-- 统计概览 -->
			<div class="records-summary" v-if="hasSearched">
				<h3><i class="el-icon-data-analysis"></i> 记录统计概览</h3>
				<div class="summary-grid">
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.totalRecords}}</div>
						<div class="summary-label">总记录数</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.completedProcesses}}</div>
						<div class="summary-label">已完成环节</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.totalCertificates}}</div>
						<div class="summary-label">检测报告数</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.avgProcessTime}}</div>
						<div class="summary-label">平均处理时间</div>
					</div>
				</div>
			</div>

			<!-- 过程记录时间线 -->
			<div class="records-timeline" v-if="hasSearched">
				<div class="timeline-header">
					<div class="timeline-title">
						<i class="el-icon-time"></i>
						处理流程记录
					</div>
					<div>
						<el-button size="small" @click="exportRecords">
							<i class="el-icon-download"></i> 导出记录
						</el-button>
						<el-button size="small" type="primary" @click="refreshRecords">
							<i class="el-icon-refresh"></i> 刷新
						</el-button>
					</div>
				</div>

				<!-- 无数据状态 -->
				<div v-if="!processRecords || processRecords.length === 0" class="no-data">
					<i class="el-icon-document" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
					<p>未找到相关记录信息</p>
					<el-button size="small" @click="resetSearch">重新查询</el-button>
				</div>

				<!-- 时间线展示 -->
				<div v-else class="process-timeline">
					<div v-for="(record, index) in processRecords" :key="record.id" class="timeline-item">
						<div :class="['timeline-dot', record.status]"></div>
						<div class="timeline-line"></div>
						<div :class="['timeline-content', record.status]">
							<div class="process-header">
								<div class="process-title">
									<i :class="record.icon"></i>
									{{record.processName}}
								</div>
								<span :class="['process-status', 'status-' + record.status]">
									{{getStatusText(record.status)}}
								</span>
							</div>
							
							<div class="process-details">
								<div class="detail-item">
									<span class="detail-label">处理时间</span>
									<span class="detail-value">{{record.processTime}}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">责任人</span>
									<span class="detail-value">{{record.responsible}}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">联系方式</span>
									<span class="detail-value">{{record.contact}}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">处理地点</span>
									<span class="detail-value">{{record.location}}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">温度记录</span>
									<span class="detail-value">{{record.temperature}}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">备注说明</span>
									<span class="detail-value">{{record.remarks}}</span>
								</div>
							</div>

							<!-- 检测报告和凭证 -->
							<div class="certificates-section" v-if="record.certificates && record.certificates.length > 0">
								<div class="certificates-title">相关凭证文件</div>
								<div class="certificate-list">
									<div v-for="cert in record.certificates" :key="cert.id" class="certificate-item" @click="viewCertificate(cert)">
										<i :class="cert.icon" class="certificate-icon"></i>
										<span class="certificate-name">{{cert.name}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 操作面板 -->
			<div class="actions-panel" v-if="!hasSearched">
				<i class="el-icon-search" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p style="color: #999; margin-bottom: 20px;">请输入溯源码或选择查询条件来查看各环节信息记录</p>
				<el-button type="primary" @click="searchRecords" :disabled="!searchForm.traceCode">开始查询</el-button>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					hasSearched: false,
					searchForm: {
						traceCode: '',
						product: '',
						processType: 'all',
						dateRange: []
					},
					products: [
						{label: '衡阳湘莲', value: 'hengyang_lotus'},
						{label: '衡阳祁东黄花菜', value: 'qidong_daylily'},
						{label: '衡阳南岳茶油', value: 'nanyue_tea_oil'},
						{label: '衡阳土鸡蛋', value: 'hengyang_eggs'},
						{label: '衡阳白葡萄', value: 'hengyang_grapes'}
					],
					quickFilters: [
						{label: '近7天', value: '7days'},
						{label: '本月', value: 'thisMonth'},
						{label: '有异常', value: 'hasIssue'},
						{label: '已完成', value: 'completed'},
						{label: '进行中', value: 'current'}
					],
					processRecords: [],
					summaryStats: {
						totalRecords: 0,
						completedProcesses: 0,
						totalCertificates: 0,
						avgProcessTime: '0小时'
					}
				}
			},
			methods: {
				searchRecords() {
					if (!this.searchForm.traceCode && !this.searchForm.product) {
						this.$message.warning('请输入溯源码或选择商品');
						return;
					}
					
					this.hasSearched = true;
					
					// 模拟获取数据
					this.processRecords = this.generateMockRecords();
					this.calculateSummary();
					
					this.$message.success('查询成功');
				},
				
				generateMockRecords() {
					return [
						{
							id: 1,
							processName: '产地种植/养殖',
							status: 'completed',
							icon: 'el-icon-sunny',
							processTime: '2024-01-15 08:00:00',
							responsible: '李师傅',
							contact: '138****1234',
							location: '衡阳市蒸湘区湘莲种植合作社',
							temperature: '8-12℃',
							remarks: '衡阳湘莲有机种植，无农药残留',
							certificates: [
								{id: 'cert1', name: '湘莲有机认证书', icon: 'el-icon-document'},
								{id: 'cert2', name: '衡阳土壤检测报告', icon: 'el-icon-files'},
								{id: 'cert3', name: '农药残留检测', icon: 'el-icon-document-checked'}
							]
						},
						{
							id: 2,
							processName: '初加工处理',
							status: 'completed',
							icon: 'el-icon-goods',
							processTime: '2024-01-16 14:30:00',
							responsible: '张包装员',
							contact: '139****5678',
							location: '衡阳湘莲加工中心',
							temperature: '4-6℃',
							remarks: '湘莲清洗、分级、真空包装完成',
							certificates: [
								{id: 'cert4', name: '湘莲加工质检报告', icon: 'el-icon-document'},
								{id: 'cert5', name: '食品安全许可证', icon: 'el-icon-medal'}
							]
						},
						{
							id: 3,
							processName: '冷链运输',
							status: 'completed',
							icon: 'el-icon-truck',
							processTime: '2024-01-17 06:00:00',
							responsible: '刘师傅',
							contact: '137****9012',
							location: '衡阳→长沙→武汉',
							temperature: '2-4℃',
							remarks: '雁农冷链全程运输，温度稳定',
							certificates: [
								{id: 'cert6', name: '冷链运输温度记录', icon: 'el-icon-data-line'},
								{id: 'cert7', name: '衡阳冷链运输证明', icon: 'el-icon-truck'}
							]
						},
						{
							id: 4,
							processName: '仓储管理',
							status: 'current',
							icon: 'el-icon-box',
							processTime: '2024-01-18 10:15:00',
							responsible: '王仓管',
							contact: '136****3456',
							location: '衡阳雁农冷链仓储中心',
							temperature: '0-2℃',
							remarks: '正在进行入库检验和分拣',
							certificates: [
								{id: 'cert8', name: '入库检验单', icon: 'el-icon-document'},
								{id: 'cert9', name: '库存温度记录', icon: 'el-icon-thermometer'}
							]
						},
						{
							id: 5,
							processName: '终端销售',
							status: 'pending',
							icon: 'el-icon-shopping-bag-2',
							processTime: '预计2024-01-19 09:00:00',
							responsible: '陈销售',
							contact: '135****7890',
							location: '衡阳雁农特产专卖店',
							temperature: '2-4℃',
							remarks: '等待上架销售',
							certificates: []
						}
					];
				},
				
				calculateSummary() {
					const records = this.processRecords;
					this.summaryStats = {
						totalRecords: records.length,
						completedProcesses: records.filter(r => r.status === 'completed').length,
						totalCertificates: records.reduce((sum, r) => sum + (r.certificates ? r.certificates.length : 0), 0),
						avgProcessTime: '18小时'
					};
				},
				
				getStatusText(status) {
					const statusMap = {
						'completed': '已完成',
						'current': '进行中',
						'pending': '待处理'
					};
					return statusMap[status] || status;
				},
				
				applyQuickFilter(filter) {
					this.$message.info(`应用筛选: ${filter.label}`);
					// 实际应用中这里会根据筛选条件更新查询结果
				},
				
				viewCertificate(cert) {
					this.$message.success(`查看凭证: ${cert.name}`);
					// 实际应用中这里会打开凭证查看弹窗或下载文件
				},
				
				exportRecords() {
					this.$message.success('记录导出功能');
					// 实际应用中这里会导出记录数据
				},
				
				refreshRecords() {
					this.searchRecords();
				},
				
				resetSearch() {
					this.searchForm = {
						traceCode: '',
						product: '',
						processType: 'all',
						dateRange: []
					};
					this.hasSearched = false;
					this.processRecords = [];
				}
			}
		});
	</script>
</body>
</html>